<template>
    <div>
        <Row style="margin:5px 0px 10px 5px" >
            <i-col span="2" >
                <Button  size="default"  type="primary" @click="btn_refresh">刷新</Button>
            </i-col>
		</Row>
        <i-table size="default"   border stripe  :columns="format" :data="show_list" :height="sharedState.tableHeight" >

        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
    </div>

</template>

<script>

import {k8s_namespace_post} from '@/api/http'
import { get_gateway_list } from  '@/api'
// import { get_placement } from '@/common/util'
import store from '@/store'

export default {
    data() {
        return {
            sharedState: store.state,
            format: [
                {
                    title: '名字',key: 'name',fixed: 'left',width:200,
                },
                {
                    title: '命名空间',key: 'namespace',width:200,
                },
                {
                    title: '选择器',key: 'selector',width:400,
                    render: (h,params) =>{
                        let value = params.row.selector
                        return h('pre',JSON.stringify(value,undefined,4))
                    }
                },
                {
                    title: '域名列表',key: 'domain_list',width:300,
                    // render: (h,params) =>{
                    //     let value = params.row.domain_list
                    //     return h('pre',JSON.stringify(value,undefined,4))
                    // }
                },
                {
                    title: '服务器',key: 'servers',width:200,
                    render : (h,params) => {
                        let servers = params.row.servers 
                        if (servers == null ){
                            return   h('p','无')
                        }else{
                            // let value = JSON.stringify(servers,undefined,4)
                            // let placement = get_placement(params)
                            // return h('Poptip', {props:{'trigger':'hover','word-wrap':true,'placement':placement,content:value}},[
                            //         h('a', '显示')
                            // ]);
                            let value=''
                            for(let i=0;i< servers.length;i++){
                                let server = servers[i]
                                let hosts = server['hosts'][0]
                                let port_name = server['port']['name']
                                let port_number = server['port']['number']
                                let item = "地址:"+hosts+"\n"+"端口:"+port_name+"("+port_number+")"
                                value += item
                                if(i != servers.length-1){
                                    value += "\n"
                                }
                            }
                            return h('pre',value)
                        }
                    }
                },
                {
                    title: '创建时间',key: 'create_time',width:200,
                },
                // {
                //     title: '操作',slot: 'action',width: 400,align: 'center'
                // }
            ],
            total_list: [],
            show_list: [],
            // 分页
            total: 0,
            pageSize: 15,
        }
    },
    methods: {
        btn_refresh(){
            setTimeout(() =>{
                this.refresh();
            },200); 
        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        refresh() {
            k8s_namespace_post(get_gateway_list).then( (response) => {
                this.total_list = response.data
                this.total = response.data.length
                if(this.total < this.pageSize) {
                    this.show_list = this.total_list
                }else {
                    let currentPage = this.$refs.page.currentPage
                    let _start = (currentPage-1) * this.pageSize
                    let _end = currentPage * this.pageSize
                    this.show_list = this.total_list.slice(_start,_end)
                }
            })
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style scoped>

</style>